<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>Bilibili 屏蔽词分享平台 | 登录</title>

    <%- include("template/head"); %>
    <style>
        body {
            background: url(img/background.jpg) fixed center center no-repeat;
            background-size: cover;
        }

        @media (max-width: 500px) {
            body {
                background: url(img/background_small.jpg) fixed center center no-repeat;
                background-size: cover;
            }
        }

        h1 {
            margin: 30px;
            color: #FFF;
        }

        p {
            color: #FFF;
        }

        .login {
            background-color: rgba(0, 0, 0, 0.1);
            max-width: 360px;
            padding: 30px;
            margin: 20px auto;
        }

        body {
            padding: 10% 0;
        }

        input {
            margin: 5px 0;
            width: 100%;
        }
        .form-control{
            color:#FFF;   
        }
    </style>

</head>

<body>
    <div class="container" style="text-align: center">
        <h1>登录</h1>
        <p>注意：使用本网站即代表您接受<a href="eula.html">最终用户协议</a></p>
        <p>我B站账号会因此被盗吗？<a href="eula.html#qa">Q/A</a></p>

        <div class="login" id="login-oauth">
            <p style="font-weight:bold">通过OAuth登录</p>
            <div v-if="oauthurl!=''">
                <p>1. 首先先登录<a href="https://passport.bilibili.com/login">Bilibili</a></p>
                <p>2.<del>点击<a :href="oauthurl" target="_blank">这里</a>，在新开的页面中点击确认登录。按钮点击没有反应是正常的，点完后关闭页面即可。</del>这个登陆方法好像不能用了，大家还是扫二维码吧</p>
                <p>或者用手机客户端扫描二维码：<a href="javascript:void(0)" v-on:click="getQRCode" data-toggle="modal" data-target="#qrmodal">生成二维码</a></p>
                <div class="modal fade" id="qrmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel">二维码登录</h4>
                            </div>
                            <div class="modal-body">
                                <img src="https://static-s.bilibili.com/passport/img/qr-tips.png" alt="提示" />
                                <p style="color:#000;margin:20px;">打开手机Bilibili客户端，左侧栏的右上角可以扫描二维码。</p>
                                <div id="qrcode"></div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" v-on:click="getLoginInfo">扫描完毕</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal -->
                </div>
                <p>3. 点击<a href="javascript:void(0)" v-on:click="getLoginInfo">这里</a>确认登录状态。</p>
                <p>目前状态：{{status}}</p>
            </div>
            <!-- 
            <a v-on:click="getOAuthKey" v-if="oauthurl==''" class="btn btn-primary btn-block" />获取</a>
            -->
        </div>
        <div class="login">
            <p>通过Cookie手动登录</p>
            <form action="login/cookies" method="post" id="cookie_login">
                <input type="text" id="uid" name="DedeUserID" placeholder="DedeUserID" class="form-control" required/>
                <input type="password" id="ckmd5" name="DedeUserID__ckMd5" placeholder="DedeUserID__ckMd5" class="form-control" required/>
                <input type="password" id="sessdata" name="SESSDATA" placeholder="SESSDATA" class="form-control" required/>
                <input type="password" id="bili_jct" name="bili_jct" placeholder="bili_jct" class="form-control" required/>
                <input type="submit" value="登录" class="btn btn-primary btn-block" />
            </form>
        </div>
    </div>
    <%- include("template/foot"); %>

    <script src="js/jquery.qrcode.min.js"></script>
    <script>
        var app = new Vue({
            el: '.container',
            data: {
                oauthurl: "",
                oauthkey: "",
                status: "等待操作……"
            },
            methods: {
                getOAuthKey: function () {
                    this.$http.get('login/getoauth').then(response => {
                        this.oauthurl = response.body.url;
                        this.oauthkey = response.body.oauthKey;
                    }, response => {
                        console.log("Failed to get OAuthKey");
                    });
                },
                getLoginInfo: function () {
                    this.$http.post('login/getinfo', { "oauthkey": this.oauthkey }).then(response => {
                        if (response.body < 0) {
                            this.status = "验证失败。"
                            if(navigator.userAgent.search("Firefox")>-1) this.status+="注：目前对火狐浏览器存在已知的兼容性问题，请换用其它浏览器或使用手机bilibili客户端扫描二维码。";
                            return;
                        }
                        results = new RegExp(/DedeUserID=(\d*?)&.*ckMd5=(.*?)&.*SESSDATA=(.*?)&.*bili_jct=(.*?)&/g).exec(response.body.url)
                        this.status = "验证成功!";
                        $("#uid").val(results[1]);
                        $("#ckmd5").val(results[2]);
                        $("#sessdata").val(results[3]);
                        $("#bili_jct").val(results[4]);
                        $("#cookie_login").submit();
                    }, response => {
                        console.log("Failed to get login info");
                    });
                },
                getQRCode: function () {
                    $('#qrcode').text("");
                    $('#qrcode').qrcode({ height: 128, width: 128, text: this.oauthurl });
                    $('#qrcode').css("background-color", "#FFF");
                }
            },
            mounted: function () {
                this.getOAuthKey();
            }
        });
    </script>
</body>

</html>
